<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>发布作品</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css"
	href="../static/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
	href="../static/bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
	<style type="text/css">
		body {
			padding-top: 20px;
			color: #d73e22;
		}
		.navbar{
			background-color: #d5d5d5;
			border: none;
		}
		h3{
			color: #e73f0a;
			position: absolute;
			left: 43%;
			top: -7px;
		}

		#back{
			color: #e73f0a;
			position: relative;
			left: -10px;
		}
		.a{
			position: relative;
			color: #ff00d5;
			top: 20px;
			font-size: 30px;
		}

	</style>
</head>
<body>
<header>
	<div class="container">
		<nav class="navbar navbar-default">
			<h3 >添加商品</h3>
			<ul class="nav navbar-nav navbar-right">
				<li><a id="back" href="http://localhost:8080/sIndex">返回首页</a></li>
			</ul>
		</nav>
	</div>
</header>

<div class="container">
	<div class="row">
		<!--左侧主要内容-->
		<div class="col-md-offset-2 col-md-8">
			<div class="bs-docs-section">
				<div class="form-group">
					<label for="name">商品名称</label>
					<input type="text" class="form-control" id="name" name="name" placeholder="请输入商品名称">
				</div>
				<div class="form-group">
					<label price="aabstract">商品价格</label>
					<input type="text" class="form-control" id="price" name="price" placeholder="请输入商品价格">
				</div>
				<div class="form-group">
					<label for="sum">库存</label>
					<input type="text" class="form-control" id="sum" name="sum" placeholder="请输入商品库存">
				</div>
				<div class="form-group">
					<label for="cata">选择分类</label>
					<select class="form-control" id="cata" name="cata">
						<option value="请选择分类...">请选择分类...</option>
						<option value="方便零食">方便零食</option>
						<option value="奶蛋制品">奶蛋制品</option>
						<option value="饮料酒水">饮料酒水</option>
						<option value="生活用品">生活用品</option>
						<option value="日用百货">日用百货</option>
						<option value="新鲜水果">新鲜水果</option>
						<option value="其他">其他</option>
					</select>
					<p id="pmsg" style="color:#ff0000;position: relative;margin: 5px auto"></p>
				</div>
				<div class="form-group">
					<label>选择图片</label>
					<input type="file" id="imgurl" name="file">
					<div id="img" class="a"></div>
				</div>
				<div id="res" class="a"></div>
				<div class="text-center">
					<button class="btn btn-danger btn-lg" id="btn">添加商品</button>
				</div>
			</div>
		</div>
		<!--左侧内容结束-->
	</div>
</div>

</body>
<script type="text/javascript" src="../static/bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../static/bootstrap3/js/respond.min.js"></script>
<script type="text/javascript" src="../static/js/vue.js"></script>
<script type="text/javascript">
	$("#btn").click(function () {
		if ($("#cata").val()=="请选择分类..."){
			alert("请选择商品分类");
			return false;
		}
		//如果没有选择文件 就执行取消
		if ($("#imgurl").val() == "") {
			alert("请上传图片")
			return false;
		}
		let formData = new FormData();
		formData.append("file", $("#imgurl")[0].files[0]);    //生成一对表单属性
		$.ajax({
			type: "POST",
			url: "addGoodsImages",
			data: formData,
			processData: false,
			contentType: false,
			success: function () {
				$.ajax({
					type: "POST",
					url: "addGoods",
					data: {"name":$("#name").val(),"price":$("#price").val(),"sum":$("#sum").val(),"cata":$("#cata").val()},
					success: function (data) {
						alert(data);
					}
				})
			}
		})
	})
</script>
</html>